<template>
  <div class="home">
    <div>
      <el-form label-width="80px">
        <br>
<!--        <el-form-item label="出库号">-->
<!--          <el-input v-model="form.outbound_no" style="width: 30%" autoComplete="off"></el-input>-->
<!--          <el-button type="info" round size="small" style="margin-left: 1%"> 自动生成</el-button>-->
<!--        </el-form-item>-->
        <el-form-item label="开票公司">
          <el-select v-model="form.company" placeholder="请选择开票公司" >
            <el-option
              v-for="item in company_option"
              :onselect="company_select"
              :key="item.value"
              :label="item.label"
              :value="item.label">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="经销商">
          <el-select v-model="form.agency" placeholder="请选择经销商" >
            <el-option
              v-for="item in agency_option"
              :onselect="agency_select"
              :key="item.value"
              :label="item.label"
              :value="item.label">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="库位">
          <el-select v-model="form.warehouse" placeholder="请选择库位" @change="selectTrigger(form.warehouse)">
            <el-option
              v-for="item in warehouse_option"
              :onselect="warehouse_select"
              :key="item.value"
              :label="item.label"
              :value="item.label">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          v-for="(products, index) in this.form.invoice"
          :key="products.key"
          :prop="'products.' + index + '.value'"
        >
          <el-select v-model="products.value"  style="width: 240px"   filterable placeholder="请选择">
            <el-option
              v-for="item in form.products"
              :key="item.id"
              :label="item.product_name"
              :value="item.id"
            >
              <a style="margin-left:1%;">{{item.product_name}}</a>
            </el-option>
          </el-select>
          <span style="margin-left: 5%;margin-right: 1%">开票数量</span><el-input v-model.number="products.amount" @input="check_qty(products.id,products.amount,products.price)" style="width: 120px"></el-input ><span style="margin-left: 1%">罐</span>
          <span style="margin-left: 5%;margin-right: 1%">单价</span><el-input v-model="products.price" style="width: 120px" @input="check_total(products.id,products.amount,products.price)"></el-input><span style="margin-left: 1%;margin-right: 1%">总价：</span><span  style="width: 10%;font-size: x-large">{{products.total}}</span >
          <el-button @click.prevent="removeproducts(products)" style="margin-left: 2%">删除</el-button>
        </el-form-item>

<!--        <el-form-item-->
<!--          v-for="(products, index) in form.products"-->
<!--          :label="'产品' + index"-->
<!--          :key="products.id"-->
<!--          :prop="'products.' + index + '.value'"-->
<!--        >-->
<!--          <el-select v-model="products.product_name" placeholder="请选择产品">-->
<!--            <el-option-->

<!--              :key="products.id"-->
<!--              :label="products.product_name"-->
<!--              :value="products.product_name">-->
<!--            </el-option>-->
<!--          </el-select>-->
<!--          <span style="margin-left: 5%;margin-right: 1%">效期</span><el-input v-model="products.bf" style="width: 10%"></el-input>-->
<!--          <span style="margin-left: 5%;margin-right: 1%">单价</span><el-input v-model.number="products.price" style="width: 10%" @input="check_total(products.id,products.qty,products.amount,products.price)"></el-input><span style="margin-left: 1%;margin-right: 1%">总价：</span><span  style="width: 10%;font-size: x-large">{{products.total}}</span >-->
<!--          <span style="margin-left: 5%;margin-right: 1%">出库数量</span><el-input v-model.number="products.amount" @input="check_qty(products.id,products.qty,products.amount,products.price)" style="width: 10%"></el-input ><span style="margin-left: 1%">罐</span>-->
<!--          <span style="margin-left: 1%;margin-right: 1%">库存：</span><span  style="width: 10%;font-size: x-large">{{products.qty}}</span >-->
<!--          <el-button @click.prevent="removeproducts(products)" style="margin-left: 2%">删除</el-button>-->
<!--        </el-form-item>-->
        <el-form-item>
          <el-button @click="addproducts">新增产品</el-button>
        </el-form-item>
        <el-button type="success"  round  style="margin-left: 16px;"  @click="onSubmit">提交</el-button>
      </el-form>
    </div>

  </div>

</template>

<script>
  import { warehouse_list } from '../../api/outbound'
  import { suboutbound } from '../../api/outbound'
  import { check_outbound_details } from '../../api/outbound'
  import { agency_list,company_list } from '../../api/other'
  import { check_actstock } from '../../api/outbound'
  export default {
    name: 'outbound',
    data() {
      return {
        xqkc:false,
        options: [
          //   {
          //   value: 'A1',
          //   label: 'A1',
          // },
          //   {
          //     value: 'A2',
          //     label: 'A2',
          //   }
        ],
        warehouse_option:[],

        agency_option:[],
        company_option:[],
        // goods_option:[],
        pagesize:20,
        currentPage:1,
        form: {
          outbound_no:'',
          warehouse:'',
          agency:'',
          company:'',
          products:[
          ],
          invoice:[],
        }
      }
    },
    mounted() {
      // this.product()
      this.warehouse()
      this.check_agency()
      this.check_company()
      // this.goods()
    },
    methods: {
      // goods() {
      //   check_actstock().then(res => { // 调用导入的方法进行查询
      //     if (res.code === 20000) {
      //       this.goods_option = []
      //       console.log(this.goods_option)
      //       for (let index = 0; index < res.options.length; index++) {
      //         this.goods_option.push({ id : "" ,product_name : "",warehouse:"",qty:"",bf:""});
      //         this.goods_option[index].id= res.options[index][0];
      //         this.goods_option[index].product_name= res.options[index][2];
      //         this.goods_option[index].warehouse= res.options[index][1];
      //         this.goods_option[index].qty= res.options[index][3];
      //         this.goods_option[index].bf= res.options[index][4];
      //       }
      //       console.log(this.goods_option)
      //     }
      //   }).catch(err => {
      //     console.log(err)
      //   })
      // },
      addproducts() {
        this.form.invoice.push({
          key: Date.now(),
          value: '',
          bf:'',
          amount:0,
          price:0,
          total:0,

        });
      },
      handleSizeChange: function (size) {
        this.pagesize = size;
      },
      handleCurrentChange: function (currentPage) {
        this.currentPage = currentPage;
      },
      check_agency(){
        agency_list().then(res=>{
          this.agency_option = []
          for (let index = 0; index < res.options.length; index++) {
            this.agency_option.push({ value : "" ,label : ""});
            this.agency_option[index].value= res.options[index][0];
            this.agency_option[index].label= res.options[index][1];
          }
          // console.log(this.warehouse_option)
        }
            ).catch(err => {
          console.log(err)
        })},

      check_company(){
        company_list().then(res=>{
            this.company_option = []
            for (let index = 0; index < res.options.length; index++) {
              this.company_option.push({ value : "" ,label : ""});
              this.company_option[index].value= res.options[index][0];
              this.company_option[index].label= res.options[index][1];
            }
            // console.log(this.warehouse_option)
          }
        ).catch(err => {
          console.log(err)
        })},

      removeproducts(item) {
        var index = this.form.invoice.indexOf(item)
        if (index !== -1) {
          this.form.invoice.splice(index, 1)
        }
      },

      warehouse() {
        warehouse_list().then(res => { // 调用导入的方法进行查询
          if (res.code === 20000) {
            this.warehouse_option = []
            for (let index = 0; index < res.options.length; index++) {
              this.warehouse_option.push({ value : "" ,label : ""});
              this.warehouse_option[index].value= res.options[index][0];
              this.warehouse_option[index].label= res.options[index][1];
            }
            // console.log(this.warehouse_option)
          }
        }).catch(err => {
          console.log(err)
        })
      },
      onSubmit() {
        // console.log(this.form)
        suboutbound(this.form)
          .then(this.$router.push('/outbound/outbound_record'))
      },
      warehouse_select(value){
        // console.log(value)
        this.data.form.warehouse = value

          },
      agency_select(value){
        // console.log(value)
        this.data.form.agency = value
      },
      company_select(value){
        // console.log(value)
        this.data.form.company = value
      },
      selectTrigger(value){
        var ware = {warehouse: value}
        check_outbound_details(ware)
          .then(res=>{
          if (res.code === 20000) {
            console.log(res)
            this.form.products = []
            for (let index = 0; index < res.options.length; index++) {
              this.form.products.push({ id : "" , inbound_no : "" ,product_name : "",qty : "",amount:'',bf:''});
              this.form.products[index].id= res.options[index][0];
              // this.form.products[index].inbound_no= res.options[index][1];
              this.form.products[index].product_name= res.options[index][1];
              // this.form.products[index].bf= res.options[index][3];
              // this.form.products[index].qty= res.options[index][4];
            }
            console.log(this.form.products)
          }
        }).catch(err => {
          console.log(err)
        })
      },
      check_qty(id,amount,price){
        // if (amount>qty){
        //   // console.log(this.form.products)
        //   for(var i=0;i<this.form.products.length;i++){
        //     if(this.form.products[i].id===id){
        //       this.form.products[i].amount=qty
        //     }
        //   }
        // }
        if (amount<0){
          // console.log(this.form.products)
          for(var i=0;i<this.form.invoice.length;i++){
            if(this.form.invoice[i].id===id){
              this.form.invoice[i].amount=0
            }
          }
        }
        for(var i=0;i<this.form.invoice.length;i++){
          if(this.form.invoice[i].id===id){this.form.invoice[i].total=this.form.invoice[i].price*this.form.invoice[i].amount}
        }

      },
      check_total(id,amount,price){
        // if (amount>qty){
        //   // console.log(this.form.products)
        //   for(var i=0;i<this.form.products.length;i++){
        //     if(this.form.products[i].id===id){this.form.products[i].amount=qty}
        //   }
        // }
        if (amount<0){
          // console.log(this.form.products)
          for(var i=0;i<this.form.invoice.length;i++){
            if(this.form.invoice[i].id===id){this.form.invoice[i].amount=0}
          }
        }
        for(var i=0;i<this.form.invoice.length;i++){
          if(this.form.invoice[i].id===id){this.form.invoice[i].total=this.form.invoice[i].price*this.form.invoice[i].amount}
        }
      },


      }
    }

</script>

<style scoped>

</style>
